<template>
  <div class="index-view" >
    <div class="wrapper">
      <hot-movies></hot-movies>
    </div>
    <div class="wrapper">
      <today-movies></today-movies>
    </div>
    <div class="wrapper">
      <high-score-movies></high-score-movies>
    </div>
    <foot></foot>
  </div>
</template>

<script>
import TodayMovies from '../components/index/TodayMovies.vue'
import HotMovies from '../components/index/HotMovies.vue'
import HighScoreMovies from '../components/index/HighScoreMovies.vue'
import Foot from './Foot'
export default {
  name: 'index-view',
  components: {
    TodayMovies,
    HotMovies,
    HighScoreMovies,
    Foot
  },
  data () {
    return {
      msg: 'Welcome to the index page!'
    }
  },
  computed: {
    login () {
      return this.$store.state.user.login
    }
  }
}
</script>

<style lang="stylus" scoped>
#building
  background url("http://127.0.0.1:8000/media/910.png")
  margin-top 10px
  width 100%
  height 100%
  background-size 100% 100%
h1
  background rgba(110, 86, 117, 0.22)
.index-view
  height auto
  overflow hidden
.wrapper
  margin 20px auto
</style>
